<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
        <script src="main.js"></script>
    </head>

    <body>

        <select id="province">
            <option value="-1">请选择</option>
        </select>
        <select id="city"></select>
        <select id="country"></select>

        <script>
            var provinceArr=['湖南','广东','台湾'];
            var cityArr=[['长沙','湘潭','株洲'],['广州','东湾','珠海'],['台北','高雄','基隆']];
            var countryArr=[[['天心区','长沙县','岳麓区'],['湘潭县','石谭镇','雨花区'],['天元区','荷塘区','石峰区']],[['白云区','天河区','海珠区'],['莞城','东城','南城'],['香洲区','斗门区','金湾区']],
                [['东区','南区','西区'],['桃源区','那玛夏区','高雄市'],['仁爱区','安乐区','信义区']]];

            function createOption(obj,data){
                    for(var i in data){
                        var op=new Option(data[i],i);
                       obj.options.add(op);
                    }
                }
                var province=document.getElementById('province');
                createOption(province,provinceArr);



            var city=document.getElementById('city');
            province.onchange=function(){
                city.options.length=0;
                createOption(city,cityArr[province.value]);
            };


            var country = document.getElementById('country');
            city.onchange=function(){
                country.options.length=0;
                createOption(country,countryArr[province.value][city.value]);
            };


            province.onchange =function()
            {
                city.options.length = 0;
                createOption(city,cityArr[province.value]);
                if(province.value>=0){
                    city.onchange();
                }else{
                    country.options.length = 0;
                }
            };

        </script>

    </body>

    </html>